<template>
  <div id="app">
    <a-button shape="round" @click="toggleTheme" class="theme_toggle"
      >切换主题</a-button
    >
    <template v-if="isDarkMode">
      <BasicLayoutDark />
    </template>
    <template v-else>
      <BasicLayout />
    </template>
    <template v-if="route.path.startsWith('/user')">
      <router-view />
    </template>
  </div>
</template>

<style>
#app {
}

.theme_toggle {
  position: absolute;
  top: 55px;
  left: 1300px;
  z-index: 1000;
  background-color: cornflowerblue !important;
  color: white !important;
  cursor: pointer !important;
  font-size: 16px !important;
}
</style>
<script setup lang="ts">
import BasicLayout from "@/layouts/BasicLayout";
import BasicLayoutDark from "@/layouts/BasicLayoutDark.vue";
import { ref } from "vue";
import { onMounted } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

const isDarkMode = ref(false);

const toggleTheme = () => {
  isDarkMode.value = !isDarkMode.value;
};

/**
 * 全局初始化函数，有全局单次调用的代码，都可以写到这里
 */
const doInit = () => {
  console.log("hello 欢迎来到我的项目");
};

onMounted(() => {
  doInit();
});
</script>
